<template>
    <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import { onMounted, ref, watch, defineProps } from "vue";
import * as echarts from "echarts";
import tdTheme from "./theme.json"; // 引入默认主题
import "../map/fujian.js";


const props = defineProps({
    className: {
        type: String,
        default: "chart",
    },
    isTrueclick: {
        type: String,
        default: "",
    },
    id: {
        type: String,
        default: "chart",
    },
    width: {
        type: String,
        default: "100%",
    },
    height: {
        type: String,
        default: "2.5rem",
    },
    options: {
        type: Object,
        default: () => ({}),
    },
    time: {
        type: Number,
        default: undefined,
    },
});
const chartRef = ref(null);

watch(
    () => props.options,
    (options) => {
        // 设置true清空echart缓存
        chart.value.setOption(options, true);
    },
    {
        deep: true,
    }
);



onMounted(() => {
    echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    initChart();
});


const initChart = () => {
    // 初始化echart
    chart.value = echarts.init(this.$el, "tdTheme");
    chart.value.setOption(this.options, true);


    //  tools.autoHover(this.chart, this.options,4,2000);
}


</script>

<style></style>
